<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>云顶之弈</title>
    <style>
      body,
      html {
        height: 100%;
        margin: 0;
        overflow: hidden;
      }

      #app {
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        margin: 0 10px;
      }

      .chessDetail {
        height: 200px;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        margin-bottom: 20px;
        display: flex;
        padding: 10px 0 0 10px;
      }

      .chessDetail-imgPanel .img {
        width: 200px;
        height: 100px;
      }

      .chessDetail .descr {
        margin-left: 10px;
        white-space: pre-wrap;
      }

      .chessList {
        flex: 1;
        overflow-y: auto;
        display: flex;
        flex-wrap: wrap;
        margin-top: 10px;
      }

      .chessPanel {
        margin: 10px;
        position: relative;
        width: 360px;
        height: 240px;
      }

      .chessPanel .imgPanel {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      .chessPanel .imgPanel img {
        width: 100%;
        height: 100%;
      }

      .chessPanel .info {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        color: red;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <p>云顶之弈 ({{allChess.length}})</p>
      <div class="chessDetail">
        <template v-if="chessDetail">
          <div class="chessDetail-imgPanel">
            <div class="title">{{chessDetail.displayName}}</div>
            <img :src="getImage(chessDetail)" class="img" />
          </div>
          <div>
            <div class="descr">{{chessDetail.skillDetail}}</div><br>
            <template v-for="(name,index) in chessDetail.races">
              <div class="descr">{{toRJText(raceMap[name])}}</div>
            </template>
            <br>
            <template v-for="(name,index) in chessDetail.jobs">
              <div class="descr">{{toRJText(jobMap[name])}}</div>
            </template>
          </div>
        </template>
      </div>
      <div class="search-p1">
        <input type="search" @change="search" placeholder="请输入关键词" />
        <button @click="sort('magic')">法力升序</button>
        <button @click="sort('price')">价格升序</button>
        <button @click="sort('attackRange')">攻距升序</button>
        <button @click="sort('attackSpeed')">攻速升序</button>
        <button @click="sort('attackData')">物攻升序</button>
        <button @click="sort('armor')">抗性升序</button>
        <button @click="sort('lifeData')">生命升序</button>
      </div>
      <div class="chessList">
        <div
          v-for="(item,index) in chessList"
          :key="item.chessId+'_'+index"
          class="chessPanel"
          @click="selectChess(item)"
        >
          <div class="imgPanel">
            <img :src="getImage(item)" alt="" class="img" />
          </div>
          <div class="info">
            <div>{{item.title+" "+item.displayName+" #"+item.chessId}}</div>
            <div>价格：{{item.price}}</div>
            <div>法力：{{item.magic}}</div>
            <div>攻距：{{item.attackRange}}</div>
            <div>攻速：{{item.attackSpeed}}</div>
            <div>物攻：{{item.attackData}}</div>
            <div>抗性：{{item.armor}}</div>
            <div>生命：{{item.lifeData}}</div>
            <div>性质：{{ item.races.concat(item.jobs).join('、') }}</div>
          </div>
        </div>
      </div>
    </div>

    <script>
      //------------
      const versionCode = "2023-2";
      const versionMap = {
        "2023-2": [
          "./LOL-YDZY/2023-2/chess.js",
          "./LOL-YDZY/2023-2/race.js",
          "./LOL-YDZY/2023-2/job.js",
        ],
      };
      const baseJss = ["https://cdn.staticfile.org/vue/2.7.0/vue.min.js"];
      setTimeout(() => load(), 0);

      //------------

      const model = {
        el: "#app",
        data: {
          chessDetail: null,
          allChess: [],
          chessList: [],
          raceMap: {},
          jobMap: {},
        },
        created() {
          console.log("----created");
          this.allChess = window.lol_chess.data;
          for (const item of this.allChess) {
            item.races = item.races.split(",").filter((s) => s);
            item.jobs = item.jobs.split(",").filter((s) => s);
          }

          this.raceMap = arrToObj(
            (window.lol_race || {}).data,
            (obj, e) => (obj[e.name] = e)
          );
          this.jobMap = arrToObj(
            (window.lol_job || {}).data,
            (obj, e) => (obj[e.name] = e)
          );

          this.chessList = this.allChess;
          console.log(this.allChess);
          console.log(this.raceMap);
          console.log(this.jobMap);
        },
        methods: {
          selectChess(item) {
            this.chessDetail = item;
          },
          search(e) {
            const value = e.target.value;
            this.chessList = this.allChess.filter(
              (e) => e.title.includes(value) || e.displayName.includes(value)
            );
          },
          sort(prop) {
            this.chessList = this.chessList.sort((e1, e2) => {
              return fixNum(e1[prop]) >= fixNum(e2[prop]) ? 1 : -1;
            });
          },
          getImage(item) {
            return window.lol_chess.imgTop + item.TFTID + ".jpg";
          },
          toRJText(item) {
            let str = "";
            if (item) {
              str += item.name + " :" + item.introduce;
            }
            if (item.level) {
              str += "\n";
              for (const l in item.level) {
                str +=( "[" + l + "]: " + item.level[l] + ";   ").replaceAll("\n",'');
              }
            }
            return str;
          },
        },
      };

      //------------
      let initCount = 0;
      function tryInit() {
        initCount--;
        if (initCount !== 0) return;
        console.log("Vue load...");
        new Vue(model);
      }
      function load() {
        for (const src of [...baseJss, ...(versionMap[versionCode] || [])]) {
          const _script = document.createElement("script");
          _script.src = src;
          _script.onload = () => tryInit();
          document.body.append(_script);
          initCount++;
        }
      }
    </script>

    <script>
      function arrToObj(arr, fun) {
        return (arr || []).reduce((obj, e) => [fun(obj, e), obj][1], {});
      }

      function fixNum(val) {
        if (typeof val === "string") {
          let idx = val.indexOf("/");
          if (idx >= 0) val = val.substr(0, idx);
          if (!isNaN(Number(val))) val = Number(val);
        }
        return val;
      }
    </script>

    <!-- <script
      src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"
      onload="tryInit()"
    ></script>
    <script src="./LOL-YDZY\2023-2\chess.js" onload="tryInit()"></script> -->
  </body>
</html>
